<script>
/*
 * @Author: Your name
 * @Date:   2020-06-27 18:24:44
 * @Last Modified by:   Your name
 * @Last Modified time: 2020-06-27 21:58:20
 */
</script>
<template>
    <div id="tabControl">
        <div class="tabControlItem" v-for="(item,index) in titles" :key="index" @click="clickItem(index)">
            <span class="titleText" :class="{textActive:currentIndex==index}">{{ item }}</span>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            currentIndex:0
        }
    },
    props:{
        titles:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    methods:{
        clickItem(index){
            this.currentIndex = index;
            this.$emit('typeClick',index);
        }
    }
}
</script>
<style lang="css">
    #tabControl{
        height: 44px;
        line-height: 44px;
        display: flex;
        background: #ffffff;
        z-index: 9;
    }
    .tabControlItem{
        flex: 1;
        text-align: center;
    }
    .tabControlItem .titleText{
        color: #999;
        font-size: 14px;
        padding-bottom: 5px;
    }
    .textActive{
        color: var(--color-tint);
        border-bottom: 2px solid var(--color-tint);
    }
</style>